<template>
  <div class="login-box">
    <div>
      <div class="box-header">
        <img class="logo" src="../assets/logo.svg" alt=""/>
        <div class="box-header-t">Management</div>
      </div>
      <div class="title">Logistics Management 物流管理系统 </div>
          <a-input
              v-model="form.userName"
              size="large"
              style="margin-top: 10px"
              class="input"
              placeholder="用户名">
            <a-icon slot="prefix" type="mail"/>
          </a-input>
          <a-input-password
              v-model="form.password"
              size="large"
              class="input"
              placeholder="密码">
            <a-icon slot="prefix" type="lock"/>
          </a-input-password>
      <div style="margin-bottom: 20px">
        <a-checkbox v-model="form.remember">自动登录</a-checkbox>
      </div>
      <a-button :loading="submitLoading" class="submit-btn" type="primary" @click="submitLogin">
        确认登陆
      </a-button>
    </div>
  </div>
</template>

<script>
import {AdminLogin} from "../api/admin";


export default {

  data() {
    return {
      sendLoading: false,
      submitLoading: false,
      form: {
        userName: '',
        password: ''
      },
    }
  },


  methods: {

    submitLogin() {
      AdminLogin(this.form).then((res) => {
        console.log(res)
        if (res.code) {
          this.$store.commit('user/saveToken', res.data.user.token)
          this.$store.commit('user/saveLoginUser', res.data.user)
          setTimeout(() => {
            this.$router.push("/carrier")
            this.submitLoading = false
          }, 700)
          this.$message.success("登陆成功")
        }
      });
    },

    tabClick(key) {
      this.submitType = key
    }

  }

}
</script>

<style scoped>

body {
  background: #000000 !important;
}

>>> .ant-tabs-bar {
  border-bottom: none !important;
}

>>> .ant-btn-primary {
  border-color: #5a84fd;
}

.login-box {
  width: 350px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.box-header {
  display: flex;
}

.box-header-t {
  font-weight: bolder;
  font-size: 30px;
}

.logo {
  width: 44px;
  height: 44px;
  margin-right: 20px;
  margin-left: 43px;
}

>>> .ant-tabs-nav {
  width: 350px;
}

>>> .ant-tabs-ink-bar {
  left: 52px;
}

>>> .ant-input-affix-wrapper .ant-input {
  font-size: 12px !important;
}

.title {
  color: #91949c;
  padding-top: 15px;
  padding-bottom: 35px;
  font-size: 13px;
  text-align: center;
}

.input {
  margin-bottom: 25px;
  font-size: 10px;
}

.code-btn {
  height: 40px;
  margin-left: 30px;
}

.submit-btn {
  letter-spacing: 2px;
  background: #5a84fd;
  width: 100%;
  height: 45px;
}

.des {
  padding-top: 25px;
  font-size: 13px;
  text-align: center;
  color: #91949c;
  letter-spacing: 2px;
}
</style>
